<template>


  <div class="tableBox">
    <div class="table1">
      <el-table :data="tableData" height="100%"  style="width: 100%">
        <el-table-column prop="one" label="社交机器人" width="90"></el-table-column>
        <el-table-column prop="two" label="(N=1139)" width="120"></el-table-column>
        <el-table-column prop="three" label width="90"></el-table-column>
        <el-table-column prop="four" label ></el-table-column>
      </el-table>
    </div>

    <div class="table2">
      <el-table :data="tableData2" height="100%" style="width: 100%">
        <el-table-column prop="one" label="人类用户" width="90"></el-table-column>
        <el-table-column prop="two" label="(N=5451)" width="120"></el-table-column>
        <el-table-column prop="three" label width="90"></el-table-column>
        <el-table-column prop="four" label></el-table-column>
      </el-table>
    </div>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [
        {
          one: "",
          two: "",
          three: "followers",
          four: "following"
        },
        {
          one: "followers",
          two: "皮尔逊相关性",
          three: "1",
          four: ".5541**"
        },
        {
          one: "",
          two: "",
          three: "",
          four: ".000"
        },
        {
          one: "following",
          two: "皮尔逊相关性",
          three: ".5541**",
          four: "1"
        },
        {
          one: "",
          two: "显著性（双尾）",
          three: ".000",
          four: ""
        }
      ],
      tableData2: [
        {
          one: "",
          two: "",
          three: "followers",
          four: "following"
        },
        {
          one: "followers",
          two: "皮尔逊相关性",
          three: "1",
          four: ".0680**"
        },
        {
          one: "",
          two: "",
          three: "",
          four: ".000"
        },
        {
          one: "following",
          two: "皮尔逊相关性",
          three: ".0680**",
          four: "1"
        },
        {
          one: "",
          two: "显著性（双尾）",
          three: ".000",
          four: ""
        }
      ]
    };
  }
};
</script>
  <style scoped >
  .tableBox{
    height: calc(100% - 30px);
  }
  .table1,.table2{
    height: 50%;
  }
.tableBox.el-table{
  height: 95%;
  color:rgb(38, 247, 177);
  background-color:rgba(163, 110, 67, 0.1);
}
.tableBox .el-table td{
  padding:5px 0;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #0f0f0f83;
}
.tableBox .el-table th,.tableBox .el-table tr {
    background-color: unset;
}
</style>
